<template>
  <div>
    <Row>
      <Form
        ref="searchForm"
        :model="tuiguangSearchForm"
        inline
        :label-width="70"
        class="search-form"
      >
        <Form-item label="手机号" prop="mobile">
          <Input
            type="text"
            v-model="tuiguangSearchForm.mobile"
            placeholder="请输入手机号"
            clearable
            style="width: 200px"
          />
        </Form-item>
        <Form-item label="推广时间">
          <DatePicker
            v-model="selectDate"
            type="datetimerange"
            format="yyyy-MM-dd"
            clearable
            @on-change="selectDateRange"
            placeholder="选择起始时间"
            style="width: 300px"
          ></DatePicker>
        </Form-item>
        <Button
          @click="getOrderData"
          type="primary"
          icon="ios-search"
          class="search-btn"
          >搜索</Button
        >
        <Button class="search-btn" type="primary" @click="handleReset"
          >重置</Button
        >
         <download-excel
              class="export-excel-wrapper"
              :data="orderData"
              :fields="fields"
              :fetch="exportOrder"
              name="推广C端会员.xls"
            >
              <Button type="info" class="export"> 导出 </Button>
            </download-excel>
        <Button @click="unbindHandle" type="primary" class="search-btn Unbind"
          >解绑会员</Button
        >
      </Form>
    </Row>
    <div style="min-height: 180px">
      <Table
        :loading="loading"
        border
        ref="selection"
        :columns="tuiguangColumns"
        :data="orderData"
        class="mt_10"
        @on-selection-change="selectionChange"
      >
      </Table>
      <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
        <Page
          :current="tuiguangSearchForm.pageNumber"
          :total="orderTotal"
          :page-size="tuiguangSearchForm.pageSize"
          @on-change="orderChangePage"
          @on-page-size-change="orderChangePageSize"
          :page-size-opts="[10, 20, 50, 100]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </div>
  </div>
</template>

<script>
import region from "@/views/lili-components/region";
import * as API_Member from "@/api/member.js";
import ossManage from "@/views/sys/oss-manage/ossManage";
import liliMap from "@/views/my-components/map/index";
import * as RegExp from "@/libs/RegExp.js";
import * as API_Order from "@/api/order.js";
import JsonExcel from "vue-json-excel";

export default {
  name: "tuiguang",
  components: {
    region,
    ossManage,
    "download-excel": JsonExcel,
    liliMap,
  },
  props: {
    memberId: {
      type: String,
    },
  },
  data() {
    return {// 收入表格的表头以及内容
      fields: {
        会员昵称: "nickName",
        手机号码: {
          field: "mobile",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        级别: "gradeName",
        区域: {
          field: "locationName",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        推广时间: "promoteDate",
        会员费累计额: {
          field: "rechargeMember",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        会员费分佣:"rechargeMemberCommission",
        消费焕贝总额: {
          field: "consumption",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        C端消费分佣: {
          field: "consumptionCommission",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        c充值钱包焕贝余额: {
          field: "rechargeMoney",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
      },
      id: "", //会员id
      loading: true, // 表单加载状态
      detailData: [], //会员信息头部端口费用数据
      selectDate: null, // 选择时间段
      tuiguangColumns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "会员昵称",
          key: "nickName",
          tooltip: true,
          width: "100",
        },
        {
          title: "手机号码",
          key: "mobile",
          tooltip: true,
          width: "120",
        },
        {
          title: "级别",
          key: "gradeName",
          width: "100",
        },
        {
          title: "区域",
          key: "locationName",
        },
        {
          title: "推广时间",
          key: "promoteDate",
        },
        {
          title: "会员费累计额",
          key: "rechargeMember",
        },
        {
          title: "会员费分佣",
          key: "rechargeMemberCommission"
        },
        {
          title: "消费焕贝总额",
          key: "consumption"
        },
        {
          title: "C端消费分佣",
          key: "consumptionCommission"
        },
        {
          title: "c充值钱包焕贝余额",
          key: "rechargeMoney",
        },
      ],
      orderData: [], //订单数据
      orderTotal: 0, //订单总条数
      //TA的订单form
      tuiguangSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        id: this.memberId,
        mobile: "",
        beginTime: "",
        endTime: "",
      },
      choseIds: [], //选中解绑的数据
    };
  },
  methods: {
     // 收入导出订单
    async exportOrder() {
      const params = JSON.parse(JSON.stringify(this.tuiguangSearchForm));
      params.pageNumber = 1;
      params.pageSize = 999999999;
      const result = await API_Member.getDisableMemberPageAll2(params);
      if (result.code==200) {
        if (result.result.records.length === 0) {
          this.$Message.warning("暂无可导出数据");
          return [];
        } else {
          return result.result.records;
        }
      } else {
        this.$Message.warning("导出数据失败，请重试");
      }
    },
    // 重置
    handleReset() {
      this.selectDate = "";
      this.tuiguangSearchForm = {
        // 请求参数
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        id: this.memberId,
        mobile: "",
        beginTime: "",
        endTime: "",
      };
      this.getOrderData();
    },
    init() {
      //收入
      this.getOrderData();
    },
    // 解绑会员
    unbindHandle() {
      if (this.choseIds.length < 1) {
        this.$Message.warning("请选择要解绑的会员");
      } else {
        this.$Modal.confirm({
          title: "解绑会员",
          content: "<p>解除绑定关系的会员，将归属平台</p>",
          onOk: () => {
            
            API_Member.unBindingMemberList({choseBindMemberIds:this.choseIds}).then((res) => {
              if (res.code==200) {
                this.$Message.success("解绑成功");
                this.getOrderData();
              } else {
                this.$Message.error(res.message);
              }
            });
          },
        });
      }
    },
    // 收入起止时间从新赋值
    selectDateRange(v) {
      if (v) {
        this.tuiguangSearchForm.beginTime = v[0];
        this.tuiguangSearchForm.endTime = v[1];
      }
    },
    getOrderData() {
      this.loading = true;
      API_Member.getDisableMemberPageAll2(this.tuiguangSearchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.orderData = res.result.records;
          this.orderTotal = res.result.total;
        }
      });
    },
    //收入
    orderChangePage(v) {
      this.tuiguangSearchForm.pageNumber = v;
      this.getOrderData();
    },
    //收入
    orderChangePageSize(v) {
      this.tuiguangSearchForm.pageNumber = 1;
      this.tuiguangSearchForm.pageSize = v;
      this.getOrderData();
    },
    // 推广会员多选，筛选出对应的id
    selectionChange(val) {
      this.choseIds = val.map((item) => item.id);
    },
  },

  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
@import "../../user-partner-detail.scss";
.export-excel-wrapper {
  margin-left: 10px;
}
.totleQuota {
  margin-left: auto;
  display: flex;
  align-items: center;
  p {
    padding: 0 15px;
    box-sizing: border-box;

    span {
      color: #ff5c58;
      padding-left: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.detailTable {
  width: 50% !important;
}
.Unbind {
  background: #f56c1d;
}
/deep/.ivu-tabs-bar {
  border: none !important;
}
.storeBtn {
  // width:30px;
  display: inline;
  padding: 8px 20px;
  box-sizing: border-box;
  border-radius: 6px;
  background: #f56c1d;
  color: #ffffff;
}
.walltMoneyNumBox {
  display: flex;
  align-items: center;
  p {
    margin-right: 20px;
  }
}
</style>
